<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				账户管理
			</view>
			<view class="content-title-rt">
				<van-button plain hairline type="primary" size="small" @click="onClickAdd">添加账户</van-button>
			</view>
		</view>
		<view class="content-box">
			<view class="item-box">
				<view>账户名称</view>
				<view>账户编号</view>
				<view>账户状态</view>
			</view>
			<view class="item-box shadow" v-for="(item) in list">
				<view>{{item.name}}</view>
				<view class="border-box">{{item.mchId}}</view>
				<view class="border-box" v-if="item.isDefault == 1"><text>当前收款</text></view>
				<view class="border-box" @click="onClickSet(item)" v-else><text class="green">设为收款</text></view>
			</view>
		</view>
<!-- 添加员工弹窗 -->
		<van-popup v-model:show="showAdd" round :style="{ padding: '20px' }">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="fromData.username" name="账户名称" label="账户名称" placeholder="请输入账户名称"
						:rules="[{ required: true, message: '请填写账户名称' }]" />
					<van-field v-model="fromData.mchId" name="商户编号" maxlength="11" label="商户编号" placeholder="请输入商户编号" :rules="[{ required: true, message: '请填写商户编号' }]" />
				</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						确认添加
					</van-button>
				</div>
			</van-form>
		</van-popup>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watchEffect,
		watch,
		onMounted
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import api from '@/api/creditedAccount.js'
	import $store from "@/store";
	import {
		showConfirmDialog
	} from 'vant';
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				list: [{
					name: '账户A',
					mchId: 'Y87624811124',
					incomeAccountId: 1,
					isDefault: 0
				},{
					name: '账户A',
					mchId: 'Y87624811124',
					incomeAccountId: 1,
					isDefault: 1
				},{
					name: '账户A',
					mchId: 'Y87624811124',
					incomeAccountId: 1,
					isDefault: 0
				}],
				fromData: {
					username: '',
					mchId: '',
				},
				showAdd: false,
			})
			const getList = () => {
				api.list({
					gasStationId: $store.state.areaId
				}).then(res => {
					
					data.list = res.rows;
				})
			}
			watch($store.state, (newVal, oldVal) => {
				if(newVal.areaId) {
					getList()
				}
			}, {
				deep: true
			})
			// 获取账户列表
			onMounted(() => {
				getList();
			})
			watchEffect(() => {
			})
			const onClickSet = (item) => {
				showConfirmDialog({
						title: '设为收款',
						message: `确认设置${item.name}为收款账户？`,
					})
					.then(() => {
						api.setDefault({
							incomeAccountId: item.incomeAccountId,
						}).then(res => {
							getList()
							uni.showToast({
								title: '设置成功',
								icon: 'none'
							})
						})
						// on confirm
					})
					.catch(() => {
						// on cancel
					});
			}
			// 清空表单数据
			const clearFrom = () => {
				data.fromData.username = '';
				data.fromData.mchId = '';
			}
			// 添加账户
			const onClickAdd = () => {
				clearFrom();
				data.showAdd = true
				
			}
			const onSubmit = () => {
				// 提交
				api.add({
					name: data.fromData.username,
					mchId: data.fromData.mchId,
					gasStationId: $store.state.areaId, //加油站id
				}).then(res => {
					getList()
					data.showAdd = false
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
				})
			}
			return {
				...toRefs(data),
				onClickSet,
				onSubmit,
				onClickAdd
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;
			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-right: 40rpx;
			
				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}

		.content-box {
			width: 100%;
			padding: 40rpx 20rpx 0;
			box-sizing: border-box;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;

				&:first-child {
					font-size: 30rpx;
				}

				&>view {
					width: 30%;
				}

				.border-box {
					display: flex;
					justify-content: center;
					// width: 18%;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 22rpx;
					text {
						color: rgb(228, 132, 132);
					}
					.green {
						color: #073160;
					}
					.van-cell {
						padding: 0;
					}
				}
			}

			.shadow {
				box-shadow: 0 0 22rpx 0 rgba(0, 0, 0, .1);
			}
		}
	}
</style>